<template>
  <div class="store-list page">
    <div class="nav-bar">
      <van-nav-bar class="bg_white" title="门店列表" />
      <head-search @areaInfo="getAreaInfo" :search-type="searchType"></head-search>
      <div class="condition-div">
        <div class="all_condition">综合排序<img src="/static/img/store/all_condition.png" alt=""></div>
        <!-- <div>销量最高</div> -->
        <div style="color:#FF911A;">距离最近</div>
        <!-- <div>筛选<img src="/static/img/store/screen.png" alt=""></div> -->
      </div>
    </div>
    <div class="content" ref="webview">
      <div class="nodata" style="max-height:500px" v-if="dataList.length===0">暂无数据</div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-if="dataList.length> 0">
        <van-list v-model="loading" :finished="finished" :finished-text="'没有更多了'" @load="onLoad" :offset="50" v-if="dataList.length>0">
          <template v-for="(item,index) in dataList">
            <div class="list" @click="goDetails(item.id)" :key="index">
              <div class="store_img"><img v-lazy="item.shop_logo" alt=""></div>
              <div class="store_info">
                <p class="store_name">{{item.shop_name}}</p>
                <p class="store_price">促销价:<span>￥{{item.min_price}}</span>&nbsp;起</p>
              </div>
              <div class="store_sat">
                <p>满意度：</p>
                <p class="store_sat_value">{{item.satisfaction}}%</p>
              </div>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
    <tab-bar v-model="isActive"></tab-bar>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'storeList',
  data () {
    return {
      searchType: 'store',
      isActive: 2,
      apiType: 'store',
      apiUrl: 'storeList',
      dataList: [],
      params: {
        provCode: 0,
        cityCode: 0,
        areaCode: 0,
        lat: 0,
        lng: 0
      }
    };
  },
  mixins: [mixins],
  created () {
  },
  methods: {
    goDetails (id) {
      this.$router.push({ 'path': 'store/sdetail', query: { id: id } });
    },
    getAreaInfo(areaInfo) {
      // console.log('父组件:');
      console.log('成功获得数据');
      this.params.lat = areaInfo.lat;
      this.params.lng = areaInfo.lng;
      this.params.provCode = areaInfo.provCode;
      this.params.cityCode = areaInfo.cityCode;
      this.params.areaCode = areaInfo.areaCode;
      this.getList(this.apiUrl, true);
      // console.log(this.dataList);
    }
  }
};
</script>
<style lang="less" scoped>
.store-list {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .nav-bar{
    height:auto;
  }
  .condition-div{
    font-size: 28px;
    width:100%;
    border-top:5px solid #F5F5F5;
    border-bottom:5px solid #F5F5F5;
    display: flex;
    flex-wrap: nowrap;
    color:#949494;
    height:60px;
    line-height: 60px;
    img{
      width:20px;
    }
    div{
      flex: 1;
      text-align: center;
    }
    .all_condition{
      display: flex;
      align-items: center;
      flex-wrap:wrap;
      justify-content: center;
      img{
        margin-left:10px;
      }
    }
  }
  .content {
    box-sizing: border-box;
    flex: 1;
    .van-list {
      padding:0 20px;
      .list {
        height: 210px;
        padding: 21px;
        border-bottom: 2px solid #eee;
        position: relative;
        box-shadow:0 0 50px rgba(85, 95, 98, 0.1);
        margin-bottom: 30px;
        border-radius: 20px;
        display: flex;
        flex-wrap:nowrap;
        justify-content: space-between;
        border:1px solid rgba(85, 95, 98, 0.1);
        .store_img,.store_sat{
          width:25%;
        }
        .store_info{
          width:45%;
          display: flex;
          flex-wrap:wrap;
          align-content: center;
          font-size: 35px;
          .store_name{
            color:#343434;
            font-weight: bold;
            width: 100%;
          }
          .store_price{
            color:#4D4D4D;
            font-size: 25px;
            span{
              color:#FF911A;
              font-weight: bold;
              font-size: 40px;
            }
          }
        }
        .store_sat{
          display: flex;
          flex-wrap:wrap;
          align-content: center;
          text-align: center;
          p:first-child{
            color:#343434;
            font-size: 25px;
            width: 100%;
            font-weight: bold;
          }
          .store_sat_value{
            width: 100%;
            color:#FF8400;
            font-size: 50px;
            font-weight: bold;
            margin-top: 10px;
          }
        }
      }
    }
    .list.active {
      &::before {
        background-color: #917eff;
      }
    }
  }
}
</style>
